<template>
  <div class="w-full h-content overflow-y-auto flex justify-center ">
    <div class="flex flex-col content-around w-4/6 ">
      <el-form :ref="addQuestionFormRef" :model="addQuestionForm" :rules="rules">
        <div class="mt-3.5">
          <div class="text-xl select-none font-bold dark:text-gray-50">标题</div>
          <div class="mt-1 text-gray-400 select-none text-sm">请具体说明问题，同时请想象你正在向另一个人提问。</div>
          <el-form-item prop="title">
            <el-input v-model="addQuestionForm.title" clearable placeholder="请输入问题标题" />
          </el-form-item>
        </div>
        <div class="mt-3.5">
          <div class="text-xl select-none font-bold dark:text-gray-50">详细问题</div>
          <div class="mt-1 text-gray-400 select-none text-sm">介绍问题并扩展标题中的内容。最少20个字符。</div>
          <el-form-item prop="content">
            <el-input
              v-model="addQuestionForm.content"
              :rows="10"
              placeholder="请输入问题详情"
              type="textarea"
            />
          </el-form-item>
        </div>
        <div class="mt-3.5">
          <div class="text-xl select-none font-bold dark:text-gray-50">附件图片</div>
          <div class="mt-1 text-gray-400 select-none text-sm">如果你觉得图片能更好地辅助您提问请上传图片。仅支持.jpg文件
            <el-form-item>
              <el-upload
                :headers="headers"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                action="http://localhost:7345/api/upload"
                list-type="picture-card"
              >
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <img :src="dialogImageUrl" alt="Preview Image" class="w-full" />
              </el-dialog>
            </el-form-item>
          </div>
        </div>
        <div>
          <div class="text-xl select-none font-bold  dark:text-gray-50 ">问题标签</div>
          <el-form-item>
            <el-check-tag v-for="tag in dynamicTags"
                          :key="tag.name"
                          :checked="tag.checked"
                          class="mr-2.5"
                          @change="tag.checked = !tag.checked">
              {{ tag.name }}
            </el-check-tag>
            <el-input
              v-if="inputVisible"
              ref="InputRef"
              v-model="inputValue"
              :on-change="handleInputConfirm"
              class="ml-1 w-20"
              size="small"
            />
            <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
              + New Tag
            </el-button>
          </el-form-item>
        </div>
        <div class="mt-3.5">
          <el-button class=" bg-green-600" type="success" @click="submitForm">看上去是所有我想问的了</el-button>
        </div>
      </el-form>

    </div>
  </div>
</template>

<script lang="ts" setup>
import router from "@/router";
import { addQuestion } from "@/utils/api/questions";
import { getToken } from "@/utils/auth";
import { Plus } from "@element-plus/icons-vue";
import type { FormInstance, FormRules, UploadProps } from "element-plus";
import { ElInput } from "element-plus";
import { nextTick, reactive, ref } from "vue";

const addQuestionFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
  title: [
    { required: true, message: "请输入标题(❁´◡`❁)", trigger: "blur" },
    { min: 8, max: 20, message: "标题还是干练一点好啦最好8-20个字捏是ヾ(≧▽≦*)o", trigger: "blur" }
  ],
  content: [
    { required: true, message: "问题他首先得被描述鸭(❁´◡`❁)", trigger: "blur" },
    { min: 10, max: 200, message: "问题内容还是具体一点好啦最好10-100个字捏是ヾ(≧▽≦*)o", trigger: "blur" }
  ]
});

const inputValue = ref("");
//TODO: 服务端建表匹配
const dynamicTags = ref([
  { name: "学校问题", type: "danger", checked: false },
  { name: "学术问题", type: "success", checked: false },
  { name: "生活问题", type: "info", checked: false },
  { name: "其他问题", type: "warning", checked: false }
]);
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof ElInput>>();


const addQuestionForm = reactive({
  title: "",
  content: "",
  tags: "",
  imageId: ""

});

const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    InputRef.value!.input!.focus();
  });
};

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push({ name: inputValue.value, type: "", checked: false });
  }
  inputVisible.value = false;
  inputValue.value = "";
};

const headers = {
  Authorization: getToken()
};

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handleSuccess: UploadProps["onSuccess"] = (response, uploadFile, uploadFiles) => {
  addQuestionForm.imageId = response.data.file_id.toString();

};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

const submitForm = () => {
  addQuestionForm.tags = dynamicTags.value.filter((tag) => tag.checked).map((tag) => tag.name).toString();
  addQuestion(addQuestionForm.title, addQuestionForm.imageId, addQuestionForm.content, addQuestionForm.tags);
  router.push({ name: "displayList" });
};

</script>

<style scoped>

</style>
